<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户列表 - BsAdmin后台模板 - 经典版演示</title>

</head>
<body>
<div id="app" class="d-flex">
    <jsp:include page="/left.jsp"></jsp:include>
    <main>
        <header>
            <a href="http://www.qadmin.net" target="_blank">网站首页</a>
            <div class="dropdown float-right">
                <button class="btn  btn-sm  dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false">
                    <svg width="20" height="1em" viewBox="0 0 16 16" class="bi bi-emoji-smile-fill rounded-circle"
                         fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd"
                              d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zM4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM10 8c.552 0 1-.672 1-1.5S10.552 5 10 5s-1 .672-1 1.5S9.448 8 10 8z"/>
                    </svg>
                    <!--可以使用图片,大小20,class='rounded-circle'-->
                    BsAdmin
                </button>
                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu2">
                    <a class="dropdown-item" href="repwd.html">修改密码</a>
                    <a class="dropdown-item" href="out.html">退出登录</a>
                </div>
            </div>
        </header>
        <div id="body">
            <main>
                <div class="main">
                    <div class="search">
                        <form class="form-inline float-left" action="" method="get">
                            <div class="form-group">
                                <input type="text" id="key" name="key" value="" class="form-control"
                                       placeholder="手机号/昵称/UID">
                            </div>
                            <button type="button" id="searchBtn" class="btn btn-primary"><i class="iconfont"></i>搜索
                            </button>
                        </form>
                        <a class="btn btn-primary float-right" href="file_create.jsp"><i class="iconfont"></i>新增</a>
                    </div>
                    <div class="table-box">
                        <table id="tb1" class="table">
                        </table>
                    </div>

                    <div id="container" style="height: 100%" class="page">

                    </div>
                </div>
            </main>
        </div>
    </main>
</div>
</body>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/echarts.min.js"></script>
<script type="text/javascript">
    //获得项目根目录
    var path = location.pathname;
    console.log(path);
    path = path.substr(0, path.substr(1).indexOf("/") + 1)


    var myChart = echarts.init(document.getElementById('container'));
    // 显示标题，图例和空的坐标轴
    myChart.setOption({
        color: ['red', 'yellow', 'orange', '#57a2fd', "#228b22"],//饼图颜色
        title: {
            text: '信息发布排行(异步请求)',
            subtext: '纯属虚构',
            x: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            x: 'left',
            data: []
        },
        toolbox: {
            show: true,
            feature: {
                mark: {
                    show: true
                },
                dataView: {
                    show: true,
                    readOnly: false
                },
                magicType: {
                    show: true,
                    type: ['pie', 'funnel'],
                    option: {
                        funnel: {
                            x: '25%',
                            width: '50%',
                            funnelAlign: 'left',
                            max: 1548
                        }
                    }
                },
                restore: {
                    show: true
                },
                saveAsImage: {
                    show: true
                }
            }
        },
        series: [{
            name: '发布排行',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: []
        }]
    });

    myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
    var names = []; //类别数组（用于存放饼图的类别）
    var brower = [];
    $.ajax({
        type: "get",
        url: "${pageContext.request.contextPath}/echarts/PieServlet",//请求数据的地址
        dataType: "json", //返回数据形式为json
        success: function (result) {
            console.log(result);
            //请求成功时执行该函数内容，result即为服务器返回的json对象
            $.each(result, function (index, item) {
                console.log(item.name);
                names.push(item.name);    //挨个取出类别并填入类别数组
                brower.push({
                    name: item.name,
                    value: item.value
                });
            });
            myChart.hideLoading(); //隐藏加载动画
            myChart.setOption({ //加载数据图表
                legend: {
                    data: names
                },
                series: [{
                    data: brower
                }]
            });
        },
        error: function (errorMsg) {
            //请求失败时执行该函数
            alert("图表请求数据失败!");
            myChart.hideLoading();
        }
    });
</script>

</html>
